<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<!-- 作用域1 -->
		<div id="app">
			<h1 v-news-title="con"></h1>
			<h1 v-news-title>美国都傻了，中国尽然发现了这个，不转不是中国人</h1>
			<h1>快看：一群母猪排队跳进了水沟</h1>
		</div>
		<!-- 作用域2 -->
		<div id="box">
			<h1 v-news-title="con"></h1>
		</div>
		
		<script type="text/javascript">
			//全局自定义指令
			Vue.directive('news-title', function(el, binding){
				//el 代表标签本身
				//binding 传入的内容
				el.style.color = "aquamarine";
				el.style.textAlign = "center";
				//有内容才添加
				if(binding.value != undefined && binding.value.length > 0){
					el.innerHTML = "CNN:"+binding.value;
				}
			})
		
			const vm = new Vue({
				el:'#app',
				data:{
					con:'震惊：某男子深夜不睡觉，竟然跑到猪圈，原因令人暖心'
				}
			})
			const vm2 = new Vue({
				el:'#box',
				data:{
					con:'震惊：某男子深夜不睡觉，竟然跑到猪圈，原因令人暖心'
				}
			})
		</script>
	</body>
</html>
